<template>
  <div class="box">
    <!-- 头 -->
    <mt-header title="购物车" fixed> </mt-header>
    <!-- 中间 -->
    <!-- 卡片 -->
    <div class="cards" v-for="(item, n) in data" :key="n">
      <span>商品名字</span>
      <button class="del" @click="del(n)">X</button>
      <hr />
      <div class="zhongjian">
        <img :src="'/shopimg/' + item.image" alt="" />
        <div>
          <span>{{ item.name }}</span>
          <span>单价：￥{{ item.price }}</span>
        </div>
      </div>
      <hr />
      <div class="concal">
        <span>总价：{{ item.price * item.count }}</span>
        <div>
          <button
            type="default"
            plain
            @click="jianshao(n)"
            :disabled="item.count <= 1"
          >
            -
          </button>
          <span>{{ item.count }}</span>
          <button type="default" plain @click="zengjia(n)">+</button>
        </div>
      </div>
    </div>
    <!-- 结算 -->
    <div class="jiesuan">
      <span>总价：￥{{ zongjia }}</span>
      <mt-button type="danger" :disabled="zongjia <= 0" @click="gobuy()"
        >结算</mt-button
      >
    </div>

    <div v-if="give==0" class="buy">
      <img src="/shopimg/give.jpg" alt="">
      <span>总计：￥{{zongjia}}元</span>
      <div style="width: 80%;
      margin: auto;text-align: center;">
        <mt-button type="primary" @click="buy()">付款成功</mt-button>
      <mt-button type="danger" @click="give=1" >取消</mt-button>
      </div>
      
    </div>

    <mt-tabbar v-model="selected" class="tabbar" fixed>
      <mt-tab-item id="index">
        <img src="../assets/img/home.png" alt="" slot="icon" /> 首页
      </mt-tab-item>
      <mt-tab-item id="fenlei">
        <img src="../assets/img/list.png" alt="" slot="icon" />商品
      </mt-tab-item>
      <mt-tab-item id="gouwuche">
        <img src="../assets/img/car.png" alt="" slot="icon" />购物车
      </mt-tab-item>
      <mt-tab-item id="mine">
        <img src="../assets/img/user.png" alt="" slot="icon" />我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
// import { mapState, mapMutations } from "vuex";
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      value: "",
      selected: "Gouwuche",
      username: "",
      password: "",
      activeName: "first",
      shopcart: "",
      data: [],
      hi: [],
      he: [],
      num: [],
      zongjia: 0,
      give: 1,
    };
  },
  watch: {
    selected(newval, oldval) {
      console.log(oldval);
      switch (newval) {
        case "fenlei":
          this.$router.push({
            path: "/fenlei",
          });
          break;
        case "gouwuche":
          this.$router.push({
            path: "/gouwuche",
          });
          break;
        case "index":
          this.$router.push({
            path: "/",
          });
          break;
        case "mine":
          this.$router.push({
            path: "/mine",
          });
          break;
      }
    },
  },
  computed: {
    // ...mapState(["user"]),
  },
  created() {
    if (sessionStorage.vuex) {
      this.username = JSON.parse(sessionStorage.vuex).user;
      this.password = JSON.parse(sessionStorage.vuex).password;
    }
  },
  methods: {
    buy() {
      this.data = [];
      this.update();
      this.give = 1;
      this.zongjia = 0;
      Toast({
            message: "购买成功！",
            position: "bottom",
            duration: 1000,
          })
    },
    gobuy() {
      this.give=0;
    },
    jianshao(n) {
      this.data[n].count--;
      this.zongjia = 0;
      if (this.data.length > 0) {
        for (var i in this.data) {
          this.zongjia += this.data[i].price * this.data[i].count;
        }
      }
    },
    zengjia(n) {
      this.data[n].count++;
      this.zongjia = 0;
      if (this.data.length > 0) {
        for (var i in this.data) {
          this.zongjia += this.data[i].price * this.data[i].count;
        }
      }
    },
    // ...mapMutations(["updateUser"]),

    // 删除一项商品,并更新给数据库
    del(n) {
      this.data.splice(n, 1);
      console.log(this.data);
      this.update();
      this.zongjia = 0;
      for (var i in this.data) {
        this.zongjia += this.data[i].price * this.data[i].count;
      }
      // allmoney();
    },
    // 考虑到会复用,添加一个事件,,更新给数据库
    update() {
      console.log(this.data);
      // this.shopcart = "";
      for (var i in this.data) {
        let aa = `{"pid":${this.data[i].pid},"num":${this.data[i].count}}#`;
        this.shopcart += aa;
      }
      console.log("shopcart   :", this.shopcart);
      let params = `username=${this.username}&shopcart=${this.shopcart}`;
      this.axios.put("/edit", params).then((res) => {
        console.log("changgogn ", res);
      });
    },

    getHi() {
      let params = `username=${this.username}&password=${this.password}`;
      this.axios.post("/login", params).then((res) => {
        // console.log("登录成功");
        console.log(res);
        // this.data = res.data;
        if (res.data.code == 200) {
          let A = res.data.result.shopcart;
          let b = A.split("#");
          b.pop();

          console.log(b);
          for (var i in b) {
            // B.push(JSON.parse(A[i]));
            this.he.push(JSON.parse(b[i]));
            // this.getData();
          }
          this.forhi();
          // console.log(JSON.parse(this.hi));
          // console.log(this.hi);
          // this.getData();
        }
      });
    },

    // 遍历hi,得到商品pid,并发送给getData请求数据,
    forhi() {
      let B = this.he;
      // console.log(this.he);
      let C;
      for (var i in B) {
        // this.num.push(B[i].num);
        C = B[i].pid;
        // console.log(C);
        this.getData(C, B);
      }
      // console.log(this.num);
    },

    // 获取商品信息,并展示到页面
    getData(C, B) {
      // let params=
      // let hi = 1;
      this.axios.get(`/cart/?pid=${C}`).then((res) => {
        // console.log(res.data.results);
        // this.data.push(res.data.results);
        // console.log(this.data[0].name);
        let datas = res.data.results;
        for (var i in datas) {
          this.data.push(datas[i]);
        }
        for (var x in this.data) {
          this.data[x].count = B[x].num;
        }
        this.zongjia = 0;
        for (var c in this.data) {
          this.zongjia += this.data[c].price * this.data[c].count;
        }
      });
    },
  },
  mounted() {
    // this.username = JSON.parse(localStorage.vuex).user;
    this.getHi();
  },
};
</script>

<style lang="scss" scoped>
.buy{
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 1080px;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 200;
  button{
    margin: 10px;
  }
  span{
    display: block;
    margin: auto;
    width: 100%;
    text-align: center;
    font-size: 30px;
    color:#fff;
    margin-top: 3vh;
    margin-bottom: 3vh;
  }

  img{
    width: 90%;
    
    display: block;
    margin: auto;margin-top: 6vh;}
  
}
hr {
  box-shadow: none;
  border: none;
  background-color: lightgray;
  width: 100%;
  height: 1px;
}
.del {
  display: block;
  float: right;
  width: 16px;
  height: 16px;
  background-color: red;
  padding: 0px;
  color: #fff;
  font-size: 9px;
  border: none;
  border-radius: 3px;
}
.cards {
  width: 90%;
  margin: auto;
  margin-top: 20px;
  background-color: rgb(250, 250, 250);
  padding: 5px;
  border-radius: 5px;

  span {
    display: inline-block;
    height: 16px;
  }
  .zhongjian {
    display: flex;
    img {
      width: 15vh;
      height: 10vh;
      display: inline-block;
      margin-right: 10px;
    }
    div {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      span {
        display: block;
      }
    }
  }
}
.concal {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    button {
      display: block;
      width: 20px;
      height: 20px;
      text-align: center;
      padding: 0px;
    }
    span {
      width: 32px;
      height: auto;
      display: block;
      text-align: center;
    }
  }
}
.jiesuan {
  position: fixed;
  bottom: 8vh;
  background-color: #fff;
  width: 100%;
  height: 8vh;
  display: flex;
  justify-content: space-between;
  span {
    display: block;
    width: 50vh;
    padding: 14px;
    color: orange;
    font-weight: bold;
    font-size: 25px;
  }
  button {
    height: 100%;
    width: 50vw;
    margin-right: 3vw;
  }
}
.tabbar {
  bottom: 0px;
  height: 8vh;
}
.box {
  padding-top: 4vh;
  padding-bottom: 20vh;
}
</style>
